<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>百度糯米购物信息导航</title>
		<style type="text/css">
			*{padding: 0px;margin: 0px;}
			.d1 img{width:100%;}
			.d2{position: fixed;top: 50%;right: 0;	}
			.d2 img{background-color: grey; margin-top: 5px; margin-right: 0;padding: 4px;}
			.d2 a{text-decoration: none;	color: white;}
			span{width:90px;height:20px;font-size: 15px; background-color: rgb(219,62,62);display: none;}
			#sp1{
				text-align: center;
				padding-top: 5px;
				position: absolute;
				top: 5px;
				left:-60px;
			}
			#sp2{
				text-align: center;
				padding-top: 5px;
				position: absolute;
				top: 40px;
				left:-60px;
			}
			#sp3{
				text-align: center;
				padding-top: 5px;
				position: absolute;
				top: 73px;
				left:-60px;
			}
			#sp4{
				text-align: center;
				padding-top: 5px;
				position: absolute;
				top: 109px;
				left:-60px;
			}
			.d2 div:hover span{				
				display: inline; /*停悬显示*/
				animation: name 2s linear;
			}
			@keyframes name{
				from{
					
					left: 0px;
					background-color: rgba(219,62,62,0);
				}
				to{
					left: -60px;
					background-color: rgba(219,62,62,1);
				}
			}
		
		</style>
	</head>
	<body>
		<div class="d1">
			<img src="img/img.bmp"/>
		</div>
		<div class="d2">
			<div><span id="sp1">购物车</span><a href="#"><img src="img/toolbar_05.png" class="img1"/></a></div>

			<div><span id="sp2">我的关注</span><a href="#"><img src="img/toolbar_10.png"/></a></div>

			<div><span id="sp3">我的足迹</span><a href="#"><img src="img/toolbar_15.png"/></a></div>

			<div><span id="sp4">我的消息</span><a href="#"><img src="img/toolbar_19.png"/></div>
		</div>
	</body>
</html>
